export const addDomProduceIntroduce = (editor) => {
 // ------------------------------------------------------------------------------------------------------------
    /*
      产品介绍图文组件
      点击组件并输入后端地址，这里对应的是http://localhost:8085/article/selectOne/{id}，文章获取接口
      会将对应图片和标题渲染进去
      若要尝试将两个及以上的组件放置同一行可以尝试定义style的float属性
    */
      const tblockModel = editor.DomComponents.addType('tblock', {
        model: {
          defaults: {
            script() {
              const el = this;
              const at = el.getAttribute("tdate")
              let tdate = at ? JSON.parse(at) : '暂无数据';
              if (at) {
                // 获取组件元素，区分每个自定义组件会有一个单独的id，以免多组件间的class或id重叠导致出错
                var that = document.getElementById(this.attributes.id.value);
                var produceImg = that.getElementsByClassName('produceImg');
                var produceContent = that.getElementsByClassName('produceContent')
                produceImg[produceImg.length - 1].src = tdate.data.photo;
                produceContent[produceContent.length - 1].innerText = tdate.data.title;
              }
            },
  
          },
        },
      });
  
      // 给component type 定义 view 
      const tblockView = editor.DomComponents.getType('tblock').view.extend({
        events: {
          click: function () {
            const model = this.model;
            const newTdate = prompt('Input message src！', "");
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                model.addAttributes({ tdate: xmlhttp.response });
                model.trigger('change:script');
              }
            }
            xmlhttp.open("GET", newTdate, true);
            xmlhttp.send();
          },
        },
      });
  
      // 注册 component 和 view
      editor.DomComponents.addType('tblock', {
        model: tblockModel,
        view: tblockView,
      });
      editor.BlockManager.add('produce', {
        label: '产品单元(后端接口)',
        category: '产品中心组件',
        content: {
          type: 'tblock', content: `<div style="border: 1px solid lightgray;width: 200px;height: 200px;background-color:white;color:black">
            <img class="produceImg" style="width: 100%;height: 60%;" src="https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/5c2600c7572af1bf8847061f35b69b1c.png"/>
            <div style="width: 100%;height: 40%;padding: 10px;">
                <div class="produceContent" style="height: 30%;width: 100%;font-size: 10px;">
                    Bentley Descartes三维图像处理软件
                </div>
                <div style="height: 30%;width: 100%;padding-right:5%;margin-top:10px;display: flex;flex-direction: row-reverse;height: 30%;">
                    <button style="border-radius: 5px;border: 1px solid lightgray;font-size: 10px;background-color: white;">了解更多</button>
                    <button style="border-radius: 5px;margin-right: 10px;border: 1px solid lightgray;font-size: 10px;">免费试用</button>
                </div>
            </div>
            </div>`},
      });
}